<template>
  <div>
    <h1 ref="h1">hello Vue3 !!</h1>
  </div>
  <div>
    <h2>{{ count }}</h2>
    <h3>{{ douCount }}</h3>
    <button @click="count++">+1</button>
    <button @click="addCount(10)">+1</button>
    <p>我是{{ user }}---今天{{ age }}</p>
    <button @click="age++">+1</button>

    <router-link to="/about">去关于页面</router-link>
    <button @click="$router.push('/about')">去关于页面</button>
    <button @click="$router.push('/about')">去关于页面</button>
    <button @click="toAbout">去关于页面</button>

  </div>
</template>

<script lang="ts" setup>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  onMounted,
} from "vue";
import { useRouter } from 'vue-router'
// 使用路由
const router = useRouter();

const toAbout = () => {
  router.push('/about/110/警察?code=1&age=60')
}

// 声明的变量名字和ref同名， 可以在onMounted访问到
const h1 = ref();
// 声明响应式数据
const count = ref(1);
const user = ref('张三')
const age = ref(15)
// 定义函数
const addCount = (num: number) => {
  count.value += num;
};
// 定义依赖属性(计算属性)
const douCount = computed(() => {
  return count.value * 2;
});
// 定义侦听属性
watch(count, (newValue, oldValue) => {
  console.log(oldValue, newValue);
});
// 生命周期函数
onMounted(() => {
  console.log("生命周期准备好了");
  console.log(h1.value);
});
</script>